<template>
  <div class="app-container">

    <el-form
      ref="form"
      v-loading="loading"
      :model="model"
      label-width="120px"
    >

      <el-form-item hidden="hidden" disabled="disabled" label="id">
        <el-input v-model="model.id" disabled="disabled" />
      </el-form-item>

      <el-form-item label="用户名">
        <el-input v-model="model.username" />
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="model.phone" />
      </el-form-item>

      <el-form-item v-show="!model.id" label="密码">
        <el-input v-model="model.password" />
      </el-form-item>

      <el-form-item label="头像">
        <el-input v-model="model.avatarUrl" />
      </el-form-item>

      <el-form-item label="拥有角色">
        <div v-for="(role ) in model.roleList" :key="role.id" class="text item">
          <el-button type="primary" disabled size="mini">{{ role.name }}</el-button>
        </div>
        <el-button type="primary" @click="selectRole">编辑</el-button>
      </el-form-item>

      <el-dialog
        title="选择权限"
        :visible.sync="showRoleSelect"
        width="40%"
      >
        <roleSelect />
      </el-dialog>

      <el-form-item v-show="model.createTime" label="创建时间">
        <el-col :span="24">
          <el-date-picker v-model="model.createTime" disabled="disabled" type="datetime" placeholder="请选择一个时间" style="width: 100%;" />
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ action }}</el-button>
        <el-button type="info" @click="back">返回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>

import { getOne, createOne, update } from '@/api/system/user'
import Bus from '@/utils/bus'

import { findByUserId } from '@/api/system/role'
import roleSelect from '@/views/system/role/select'

export default {
  components: { roleSelect },

  data() {
    return {
      action: '创建',
      loading: true,
      showRoleSelect: false,
      model: {}
    }
  },
  async created() {
    const id = this.$route.params.id
    if (!id) {
      this.loading = false
      return
    }
    this.action = '修改'
    const { data } = await getOne(id)
    const resp = await findByUserId(id)

    this.model = data
    this.model.roleList = resp.data
    this.loading = false
  }, mounted() {
    Bus.$on('selectRoleClose', () => {
      console.log('bus selectRoleClose')

      this.selectRoleClose()
    })
  },
  methods: {
    async onSubmit() {
      console.log(this.model)
      let res
      if (this.model.id) {
        res = await update(this.model).then({})
      } else {
        res = await createOne(this.model).then({})
      }
      if (res.code === 0) {
        this.$message.success('操作成功')
        this.back()
      }
    },
    selectRole() {
      this.selectRoleShow()
    },
    selectRoleShow() {
      this.$store.state.edit = {}
      this.$store.state.edit.user = this.model
      this.showRoleSelect = true
    },
    selectRoleClose() {
      this.model.roleIds = []
      this.$store.state.edit.user.roleList.forEach(element => this.model.roleIds.push(element.id))
      console.log(this.$store.state.edit.user.roleIds)

      console.log(this.model.roleIds)

      this.showRoleSelect = false
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
